@extends('layout')

@section('title', $application->name.'微信支付')

@section('style')
    <style>
        .background {
            position: absolute;
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
            filter: blur(2px);
        }
    </style>
@endsection

@section('app')
    <img class="background" src="{{ $application->background_url }}"/>

    <div class="weui-msg">
        <div class="weui-msg__icon-area"></div>
        <div class="weui-msg__text-area"></div>
        <div class="weui-msg__opr-area">
            <p class="weui-btn-area">
                <a href="javascript:onBridgeReady()" class="weui-btn weui-btn_primary">重新支付</a>
            </p>
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__links">
                    <a href="javascript:void(0);" class="weui-wa-hotarea weui-footer__link">Uz.Tech</a>
                </p>
                <p class="weui-footer__text">Copyright &copy; {{ date('Y') }} cjango.com</p>
            </div>
        </div>
    </div>

    <div id="dialog-success" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">恭喜你支付成功<br />3秒后自动返回</div>
            <div class="weui-dialog__ft">
                <a href="javascript:goBack()" class="weui-dialog__btn weui-dialog__btn_primary">
                    立即跳转
                </a>
            </div>
        </div>
    </div>

    <div id="dialog-fail" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd" id="err-message">支付失败或取消支付<br />3秒后自动返回</div>
            <div class="weui-dialog__ft">
                <a href="javascript:window.history.back()" class="weui-dialog__btn weui-dialog__btn_primary">
                    立即返回
                </a>
            </div>
        </div>
    </div>

    <script>
        function goBack() {
            window.location.href = "{{ $callback }}"
        }

        function onBridgeReady() {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                {!! $jsConfig !!},
                function (res) {
                    if (res.errMsg === "get_brand_wcpay_request:ok") {
                        $('#dialog-success').fadeIn(200)
                        setTimeout(function () {
                            goBack()
                        }, 3000);
                    } else {
                        $('#dialog-fail').fadeIn(200)
                        // setTimeout(function () {
                        //     window.history.back()
                        // }, 3000);
                    }
                })
        }

        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }
    </script>
@endsection
